<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css"
            rel="stylesheet"
        />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <link rel="stylesheet" href="css/mi.css" />
    </head>
    <body>
        <header>
            <!-- 打字搜索 -->
            <div class="search">
                <div class="logo">
                    <i class="fa fa-home" aria-hidden="true"></i>
                </div>
                <div class="searchbox">
                    <div class="icon">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </div>
                    搜索商品名称
                </div>
                <div class="user">
                    <i class="fa fa-user" aria-hidden="true"></i>
                </div>
            </div>
            <!-- 搜索条 -->
            <div class="menu">
                <input type="checkbox" id="toggle" hidden>
                <label for="toggle"><i class="fa fa-arrow-down" aria-hidden="true"></i></label>
                <div class="category">
                    <h2>全部</h2>
                    <ul>
                        <li><a href="" class="active">推荐</a></li>
                        <li><a href="">手机</a></li>
                        <li><a href="">智能</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">家电</a></li>
                        <li><a href="">周边</a></li>
                    </ul>
                </div>
                <nav>
                    <div>
                        <a href="" class="active">推荐</a>
                        <a href="">手机</a>
                        <a href="">智能</a>
                        <a href="">电视</a>
                        <a href="">笔记本</a>
                        <a href="">家电</a>
                    </div>
                </nav>
            </div>
        </header>
        <main>
            <img src="images/mi.jpg" alt="" />

            <div class="category">
                <a href=""><img src="images/c1.png" alt="" /></a>
                <a href=""><img src="images/c2.webp" alt="" /></a>
                <a href=""><img src="images/c3.webp" alt="" /></a>
                <a href=""><img src="images/c4.webp" alt="" /></a>
                <a href=""><img src="images/c5.webp" alt="" /></a>
                <a href=""><img src="images/c6.webp" alt="" /></a>
                <a href=""><img src="images/c1.png" alt="" /></a>
                <a href=""><img src="images/c2.webp" alt="" /></a>
                <a href=""><img src="images/c4.webp" alt="" /></a>
                <a href=""><img src="images/c6.webp" alt="" /></a>
            </div>

            <div class="ad">
                <a href="">
                    <img src="images/h1.webp" alt="" />
                </a>
                <div>
                    <a href="">
                        <img src="images/h2.webp" alt="" />
                    </a>
                    <a href="">
                        <img src="images/h3.webp" alt="" />
                    </a>
                </div>
            </div>

            <a href="">
                <img src="images/a1.webp" alt="" />
            </a>
            <a href="">
                <img src="images/a2.webp" alt="" />
            </a>

            <div class="lists">
                <section>
                  <div class="thumb">
                    <img src="images/g1.jpg" alt="" />
                  </div>
                  <h5>小米10 Pro</h5>
                  <div class="description">骁龙865 / 50倍变焦</div>
                  <div class="price">4999 <small>起</small></div>
                  <a href="#" class="btn"> 立即购买 </a>
                </section>
                <section>
                  <div class="thumb">
                    <img src="images/g1.jpg" alt="" />
                  </div>
                  <h5>小米10 Pro</h5>
                  <div class="description">骁龙865 / 50倍变焦</div>
                  <div class="price">4999 <small>起</small></div>
                  <a href="#" class="btn"> 立即购买 </a>
                </section>
                <section>
                  <div class="thumb">
                    <img src="images/g1.jpg" alt="" />
                  </div>
                  <h5>小米10 Pro</h5>
                  <div class="description">骁龙865 / 50倍变焦</div>
                  <div class="price">4999 <small>起</small></div>
                  <a href="#" class="btn"> 立即购买 </a>
                </section>
                <section>
                  <div class="thumb">
                    <img src="images/g1.jpg" alt="" />
                  </div>
                  <h5>小米10 Pro</h5>
                  <div class="description">骁龙865 / 50倍变焦</div>
                  <div class="price">4999 <small>起</small></div>
                  <a href="#" class="btn"> 立即购买 </a>
                </section>
              </div>
        </main>
        <footer>
            <a href="" class="active">
              <i class="fa fa-home" aria-hidden="true"></i>
              首页
            </a>
      
            <a href="">
              <i class="fa fa-facebook" aria-hidden="true"></i>
              游戏
            </a>
            <a href="">
              <i class="fa fa-google" aria-hidden="true"></i>
              电话
            </a>
            <a href="">
              <i class="fa fa-wrench" aria-hidden="true"></i>
              视频
            </a>
            <a href="">
              <i class="fa fa-weibo" aria-hidden="true"></i>
              娱乐
            </a>
          </footer>
    </body>
</html>
